package com.wake.mycomposebook.ui.home.layouts

import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.Button
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.constraintlayout.compose.ConstraintLayout
import com.wake.mycomposebook.ui.home.modifier.m.MyText

/**
 *@author created by WA03675
 *@date  2022-04-18 14:27
 *@des
 */

@Composable
fun MyLayouts() {
    Column(Modifier.verticalScroll(rememberScrollState())) {

        Row(
            horizontalArrangement = Arrangement.SpaceEvenly, modifier = Modifier
                .fillMaxWidth()
                .height(100.dp)
        ) {
            MyThird()
        }

        Row(
            horizontalArrangement = Arrangement.End, modifier = Modifier
                .fillMaxWidth()
                .height(100.dp)
        ) {
            MyThird()
        }

        Column(
            horizontalAlignment = Alignment.End,
            verticalArrangement = Arrangement.SpaceAround,
            modifier = Modifier
                .fillMaxWidth()
                .height(200.dp)
        ) {
            MyThird()
        }

        Column(
            verticalArrangement = Arrangement.SpaceEvenly,
            modifier = Modifier
                .fillMaxWidth()
                .height(200.dp)
        ) {
            MyThird()
        }

        Box {
            Box(
                modifier = Modifier
                    .width(200.dp)
                    .height(200.dp)
                    .background(Color.Red)
            )

            Box(
                modifier = Modifier
                    .width(100.dp)
                    .height(100.dp)
                    .background(Color.Green)
            )

            Box(
                modifier = Modifier
                    .width(50.dp)
                    .height(50.dp)
                    .background(Color.Cyan)
            )
        }

        Box(modifier = Modifier.padding(20.dp)) {
            Box(
                modifier = Modifier
                    .width(200.dp)
                    .height(200.dp)
                    .align(Alignment.TopEnd)
                    .background(Color.Red)
            )

            Box(
                modifier = Modifier
                    .width(100.dp)
                    .height(100.dp)
                    .align(Alignment.BottomEnd)
                    .background(Color.Green)
            )

            Box(
                modifier = Modifier
                    .width(50.dp)
                    .height(50.dp)
                    .align(Alignment.BottomCenter)
                    .background(Color.Cyan)
            )
        }


        ConstraintLayout {
            Button(onClick = { /*TODO*/ }) {
                Text(text = "Main Button")
            }

            Text(text = "Main Text", style = MaterialTheme.typography.titleLarge)
            Text(text = "Main Text", style = MaterialTheme.typography.titleMedium)

            Button(
                onClick = { /*TODO*/ },
                Modifier
                    .padding(5.dp)
                    .border(1.dp, Color.Green, RoundedCornerShape(10.dp))
            ) {
                Text(text = "Outline Button", color = MaterialTheme.colorScheme.onSecondary)
            }
        }

        MyConstraintLayout()
    }
}


@Composable
fun MyThird() {
    MyText("First")
    MyText("Second")
    MyText("Third")
}

@Composable
fun MyConstraintLayout() {
    ConstraintLayout(modifier = Modifier.border(1.dp, Color.Red, RoundedCornerShape(15.dp))) {
        val (mainBt, mainTv, sTV, oB) = createRefs()
        Button(onClick = { /*TODO*/ }, modifier = Modifier.constrainAs(mainBt) {
            top.linkTo(parent.top, margin = 16.dp)
        }) {
            Text(text = "main Bt")
        }

        Text(text = "Main Text", modifier = Modifier.constrainAs(mainTv) {
            top.linkTo(parent.top, margin = 16.dp)
            absoluteLeft.linkTo(mainBt.end, margin = 16.dp)
        })

        Text(text = "sTV", modifier = Modifier.constrainAs(sTV) {
            top.linkTo(mainTv.bottom, margin = 16.dp)
            absoluteLeft.linkTo(mainTv.absoluteLeft)
        })

        Button(onClick = { /*TODO*/ }, modifier = Modifier.constrainAs(oB) {
            bottom.linkTo(parent.bottom)
            absoluteRight.linkTo(parent.absoluteRight)
        }) {

        }
    }
}